<template>
<van-sticky :offset-top="0">
  <van-nav-bar :title="data[active].name" left-text="返回" left-arrow @click-left="onClickLeft" />
   </van-sticky>
   <router-view></router-view>
    <van-tabbar v-model="active" route>
        <van-tabbar-item v-for="i in data" :icon="i.icon" :to="i.to">{{i.name}}</van-tabbar-item>
    </van-tabbar>

</template>

<script setup>
import { ref ,onMounted} from 'vue';
import { useRouter,useRoute } from 'vue-router';
const active=ref(0)
const router = useRouter()
const route=useRoute()
const onClickLeft = () => router.go(-1);
let data=ref([
    {
        name:'首页',
        icon:'search',
        to:'/home/shouye'
    },
     {
        name:'分类',
        icon:'search',
        to:'/home/class'
    },
     {
        name:'购物车',
        icon:'search',
        to:'/home/shop'
    },
     {
        name:'我的',
        icon:'search',
        to:'/home/wode'
    },
])
onMounted(() => {
    active.value = data.value.findIndex(item => item.to === route.path)? data.value.findIndex(item => item.to === route.path):0;
});
</script>

<style lang="scss" scoped></style>